<template>
  <div
    class="online-table"
    :style="{
      '--height': height + 'px',
      '--gap': gap + 'px',
    }"
  >
    <div class="online-table-label">
      <div></div>
      <div>X轴</div>
      <div>Y轴</div>
      <div>Z轴</div>
      <div v-if="mode == 2">Y轴抬升</div>
    </div>
    <div
      v-for="(item, k) in data"
      :key="index + '_' + k"
      class="online-table-value"
      :style="{
        width: mode == 1 ? 'calc(50% - 35px - var(--gap)' : '160px',
      }"
    >
      <div>
        {{ item.name }}
        <el-button
          type="warning"
          icon="el-icon-rank"
          size="mini"
          title="定位到该坐标"
          :disabled="disabled"
          @click="localPosition(item)"
        />
        <el-button
          type="primary"
          icon="el-icon-position"
          size="mini"
          title="基于此坐标生成其它坐标"
          @click="lockSolt(item, k)"
        />
        <el-button
          type="success"
          icon="el-icon-thumb"
          size="mini"
          title="写入坐标"
          @click="fillAxis(item, k)"
        />
      </div>
      <div>
        <el-input-number
          v-model="item.xaxis"
          step-strictly
          :controls="false"
          @change="changeData"
          :style="{
            '--bgcolor': getBackground(item.xaxis, item.coordinateStatus),
          }"
        />
      </div>
      <div>
        <el-input-number
          v-model="item.yaxis"
          step-strictly
          :controls="false"
          :style="{
            '--bgcolor': getBackground(item.yaxis, item.coordinateStatus),
          }"
          @change="changeData"
        />
      </div>
      <div>
        <el-input-number
          v-model="item.zaxis"
          step-strictly
          :controls="false"
          :style="{
            '--bgcolor': getBackground(item.zaxis, item.coordinateStatus),
          }"
          @change="changeData"
        />
      </div>
      <div v-if="mode == 2">
        <el-input-number
          v-model="item.yaxisUp"
          step-strictly
          :controls="false"
          :style="{
            '--bgcolor': getBackground(item.yaxisUp, item.coordinateStatus),
          }"
          @change="changeData"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "OnlineTable",
  props: {
    // 数据源
    data: {
      required: true,
      type: Array,
      default: () => [],
    },
    // 唯一标识
    index: {
      required: true,
      type: Number,
      default: -1,
    },
    // 控制器信息
    info: {
      type: Object,
      default: () => {
        return {
          originalX: 0,
          originalY: 0,
          serialPortList: []
        };
      },
    },
    form: {
      type: Object,
      default: () => {},
    },
    // 模式
    mode: {
      type: Number,
      default: 1, // 1自动 2手动
    },
    // 高度
    height: {
      type: [Number, String],
      default: 30,
    },
    // 间距
    gap: {
      type: [Number, String],
      default: 8,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 数据改变
    changeData() {
      this.$emit("change", {
        index: this.index,
        data: this.data,
      });
    },
    // 获取背景色
    getBackground(field, status) {
      return field < 0
        ? "rgba(255, 183, 170, 0.2)"
        : status == 1
        ? "rgba(184, 255, 149, 0.2)"
        : status == 3
        ? "rgba(243, 180, 23, 0.2)"
        : "rgba(255, 183, 170, 0.2)";
    },
    // 坐标改变
    localPosition(item) {
      if (this.info.serialPortList.length == 0) {
        this.$message.error("请先连接串口");
        return;
      }
      this.$emit("position", {
        index: this.index,
        data: item,
      });
    },
    // 锁槽
    lockSolt(item, subIndex) {
      if (item.xaxis > 0 && item.yaxis > 0) {
        let data = {};
        if (this.mode == 1) {
          item.coordinateStatus = 1;
          this.data.forEach((i) => {
            if (i.coordinateStatus == 3) {
              i.coordinateStatus = 2;
              i.xaxis = -1;
              i.yaxis = -1;
              i.zaxis = -1;
              i.yaxisUp = -1;
            }
          });
          data.layerSlotList = this.data;
          data.first = subIndex == 0;
        } else {
          item.coordinateStatus = 1;
          data.vo = item;
        }
        this.$emit("lock", {
          index: this.index,
          data: data,
        });
      } else {
        this.$message.warning("坐标不正确");
      }
    },
    // 填充坐标
    fillAxis(item, subIndex) {
      this.data[subIndex].xaxis = this.info.originalX || 0;
      this.data[subIndex].yaxis = this.info.originalY || 0;
      this.data[subIndex].zaxis = this.form.zaxis || 0;
      this.data[subIndex].yaxisUp = this.form.yaxisUp || 0;
      this.changeData();
    }
  },
};
</script>
<style lang="scss" scoped>
.online-table {
  width: 100%;
  --height: 32px;
  --gap: 10px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  position: relative;
  &-label {
    width: 70px;
    display: inline-block;
    position: sticky;
    left: 0;
    z-index: 1;
    vertical-align: top;
    background: linear-gradient(to right, #fff 80%, #ffffff00 100%);
    > div {
      height: var(--height);
      line-height: var(--height);
      text-align: center;
      margin-bottom: var(--gap);
      font-size: 14px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &-value {
    display: inline-block;
    min-width: 200px;
    margin-left: var(--gap);
    vertical-align: top;
    --bgcolor: #fff;
    ::v-deep .el-input__inner {
      background-color: var(--bgcolor) !important;
    }
    > div {
      height: var(--height);
      line-height: var(--height);
      text-align: center;
      margin-bottom: var(--gap);
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.el-input-number,
::v-deep .el-input--medium .el-input__inner {
  width: 100%;
  height: calc(var(--height) - 2px);
  line-height: calc(var(--height) - 2px);
}
</style>
